<template>
  <div class="sidebar-group"
    :class="{ first, collapsable }">
    <p class="sidebar-heading"
      :class="{ open }"
      @click="$emit('toggle')">
      <span>{{ item.title }}</span>
      <span class="arrow"
        v-if="collapsable"
        :class="open ? 'down' : 'right'"></span>
    </p>
    <DropdownTransition>
      <ul class="sidebar-group-items"
        ref="items"
        v-if="open || !collapsable">
        <li v-for="child in item.children">
          <SidebarLink :item="child" />
        </li>
      </ul>
    </DropdownTransition>
  </div>
</template>

<script>
import SidebarLink from "./SidebarLink.vue";
import DropdownTransition from "./DropdownTransition.vue";

export default {
  name: "SidebarGroup",
  props: ["item", "first", "open", "collapsable"],
  components: { SidebarLink, DropdownTransition }
};
</script>

<style lang="stylus">
.sidebar-group {
  &:not(.first) {
    margin-top: 1em;
  }

  .sidebar-group {
    padding-left: 0.5em;
  }

  &:not(.collapsable) {
    .sidebar-heading {
      cursor: auto;
      color: inherit;
    }
  }
}

.sidebar-heading {
  color: #999;
  transition: color 0.15s ease;
  cursor: pointer;
  font-size: 1.1em;
  font-weight: bold;
  // text-transform uppercase
  padding-left: 1.5rem;
  margin-top: 0;
  margin-bottom: 0.5rem;

  &.open, &:hover {
    color: inherit;
  }

  .arrow {
    position: relative;
    top: -0.12em;
    left: 0.5em;
  }

  &:.open .arrow {
    top: -0.18em;
  }
}

.sidebar-group-items {
  transition: height 0.1s ease-out;
  overflow: hidden;
}
</style>
